<template>
    <div class="user-history">
        <!-- 导航栏 -->
        <van-nav-bar
        class="app-nav-bar"
        title="历史"
        left-arrow
        @click-left="$router.back()"
        />
        <!-- 导航栏 -->

        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
        <!-- 单元格结构 -->
          <div v-for="(item, index) in historyList" :key="index">
                <article-item :article="item" />
          </div>
        </van-list>
    </div>
</template>

<script>
import ArticleItem from '@/components/article-item'
import { getUserHistory } from '@/api/article'

export default {
    name: 'UserHistory',
    components: {
        ArticleItem
    },
    props: {},
    data () {
        return {
            historyList: [],
            loading: false,
            finished: false,
            page: 1,
            per_page: 10
        }
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {},
    methods: {
        async onLoad() {
        const { data } = await getUserHistory({
            page: this.page,
            per_page: this.per_page,
        });
        this.historyList = [...this.historyList, ...data.data.results];
        this.page++;
        this.loading = false;
        if (data.data.results.length == 0) {
            this.finished = true;
        }
        }
    }
}
</script>

<style scoped>
/deep/.van-icon{
    color:#fff;
}
@keyframes opt {
  0% {
    opacity: 0;
    transform: scaleX(0) scaleY(0);
  }

  50% {
    opacity: 1;
    transform: scaleX(100%) scaleY(100%);
  }

  100% {
    opacity: 0;
    transform: scaleX(0) scaleY(0);
  }
}
</style>